<template>
  <div class="binhai">
    <p>温州理工滨海校区</p>
    <input type="text"  v-model="studentId" ><input type="button" value="搜索" @click="findStudent">
    <div v-if="studentInfo">  
      <p>学生信息</p>  
      <p>学号: {{ studentInfo.id }}</p>  
      <p>姓名: {{ studentInfo.name }}</p>
      <p>年龄: {{ studentInfo.ages }}</p>
      <p>专业: {{ studentInfo.major }}</p>  
    </div>  
    <div v-else-if="isLoading">  
      <p>正在加载学生信息...</p>  
    </div>  
    <div v-else-if="errorMessage">  
      <p>错误: {{ errorMessage }}</p>  
    </div>  
    <div v-else>  
      <p></p>  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      studentId: '',  
      studentInfo: null,  
      isLoading: false,  
      errorMessage: null,  
    };  
  },  
  methods: {  
    findStudent() {  
      this.isLoading = true;  
      this.errorMessage = null;  
      this.studentInfo = null;  
  
      setTimeout(() => {  
        if (this.studentId === '123456') {  
          this.studentInfo = {  
            id: '123456',  
            name: '张三',  
            ages: '18',
            major: '计算机科学',
          };  
        } else {  
          this.errorMessage = '找不到对应的学生信息';  
        }  
        this.isLoading = false;  
      }, 1000);
    },  
  },  
};  
</script>  
  